<template>
  <div class="container-width app-container">
    <el-row v-if="!hasCourse">
      <el-col :span="8">
        <el-image class="img" :src="info.courseThumb"></el-image>
      </el-col>
      <el-col :span="16" class="content" >
        <p>{{ info.courseName }}</p>
        <p class="type">
          课程类型：<span>{{ getType }}</span
          >有效期 <span> {{ info.validYears }} 年</span>
        </p>
        <p class="price">
          <span>¥ {{ info.discountPrice.toFixed(2) }}</span><span>¥ {{ info.price.toFixed(2) }}</span>
        </p>

        <div flex="main:left cross:center" style="justify-content: flex-start; align-items: center; display: flex;">
          <el-button type="primary" class="btn_2" round @click="buy">立即购买</el-button>
          <div>
            <el-button type="primary" class="btn_2" round plain @click="joinCar">加入购物车</el-button>
             <joinCarAnimi ref="joinAnimi"  :courseId="info.courseId" :src="info.courseThumb"></joinCarAnimi>
          </div>
          
        </div>
      </el-col>
    </el-row>

    <catalogueBar  ref="videoBar" @playEnd="playEnd" @lessonChange="lessonChange" v-else :catalogue="catalogue"></catalogueBar>

    <el-row class="container-width">
      <el-col :span="18" class="introduce">
        <el-tabs v-model="activeTab" @tab-click="changeTabs">
          <el-tab-pane label="课程介绍" name="introduce">
            <introduce :introduce="info"></introduce>
          </el-tab-pane>
          <el-tab-pane label="目录" name="catalogue">
            <catalogue  :catalogue="catalogue" @lessonChange="lessonChange"></catalogue>
          </el-tab-pane>
             <el-tab-pane label="课程答疑" name="QA" v-if="hasCourse">
               <courseqa ref="QA" :courseId="info.courseId" :lessonId="info.lessonId"></courseqa>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="6">
        <p class="itemTitle">课程老师</p>
         <div
          flex="main:left"
          style="display: flex; justify-content: flex-start"
          class="teacher-item"
          v-for="(item, index) in teacher"
          :key="`class-${index}`"
        >
          <div>
            <el-image class="teacher-icon" :src="item.teacherThumb" ></el-image>
          </div>

          <div>
            <p>
              {{ item.teacherName }}
              <span class="teacher-title">{{ item.title }}</span>
            </p>
            <p>
              <img
                class="teacher-level"
                v-for="level in 5"
                :key="level"
                src="../../../../src/assets/images/labels/teacher_level.png"
              />
            </p>
            <p class="teacher-text content-text text-ellipsis-Multiline">
              {{ item.teacherBriefDescribe }}
            </p>
          </div>
        </div>
        <p class="itemTitle">推荐课程</p>
        <div 
          flex="main:left" style="display: flex; justify-content: flex-start"
          class="class_item"
          @click="toLesson(item)" 
          v-for="(item, index) in classes" 
          :key="index"
        >
          <el-image class="class-img" :src="item.courseThumb" ></el-image>
          <div style="width:140px">
            <p class="text-ellipsis-single">{{ item.courseName }}</p>
            <p class="class-text content-text text-ellipsis-Multiline">
              {{ item.briefDescribe }}
            </p>
            <p class="class-price">¥ {{ item.discountPrice.toFixed(2) }}</p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import catalogue from "/@/components/course/catalogue.vue";
import courseqa from "/@/components/course/courseqa.vue";
import catalogueBar from "/@/components/course/catalogueBar.vue";
import introduce from "/@/components/course/introduce.vue";
import joinCarAnimi from "/@/components/joinCarAnimi/index.vue";

import { courseDetail, courseTotalChapters } from "/@/api/course";
import { createOrder } from "/@/api/order";
import { getVodPlayList } from "/@/api/vodApi";

import router from "/@/router";
import { useOptionsStore } from "/@/store/index";
const optionsStore = useOptionsStore();

export default {
  components: {
    catalogue,
    catalogueBar,
    introduce,
    joinCarAnimi,
    courseqa
  },
  data() {
    return {
      info: {
        discountPrice:0,
        price:0
      },
      activeTab: "introduce",
      hasCourse: false,
      catalogue: [],
      teacher: [],
      classes: [],
      activeChapterId:"",
      activechapterIndex:'',
      activeLessonId:''
    };
  },
  mounted() {
    const {courseId} = this.$route.query
    this.getCourseDetail(courseId);
  
  },
  computed: {
    getType() {
      return optionsStore.getCourseMode(this.info.courseMode);
      // if (!this.info.courseMode) {
      //   return "";
      // } else {
      //   switch (this.info.courseMode) {
      //     case 1:
      //       return "录播";
      //     case 2:
      //       return "直播";
      //       default:return ""
      //   }
      // }
    },
  },
  methods: {
    // 跳转到推荐课程
    toLesson(lesson){
        const routeUrl = this.$router.resolve({ name:'course-courseDetail',query:{courseId:lesson.courseId}});
        window.open(routeUrl.href, '_blank');
    },
    joinCar(){
     this.$refs.joinAnimi.joinCar()
    },
    buy(){
      createOrder({courseIds:[this.info.courseId]}).then(res=> {
        this.$router.push({name:"checkOrder",query:{orderId:res.orderId}})
      }).catch(()=>{})
    },
    lessonChange(lessonId) {
      if(this.hasCourse){
        this.getVideoAddr(lessonId)
      }
    },

    // 播放结束
    playEnd(){
      const activeLessonIndex = this.catalogue[this.activechapterIndex].lessonInfo.findIndex(lesson=>lesson.lessonId===this.activeLessonId);
      if(activeLessonIndex<0) return;
      //下个视屏是否下一章
      const nextIsNewChapter = this.catalogue[this.activechapterIndex].lessonInfo.length <= activeLessonIndex+1
      let nextChapterIndex = nextIsNewChapter ? this.activechapterIndex+1 : this.activechapterIndex;
      let nextLessonIndex =nextIsNewChapter ? 0 : activeLessonIndex+1;
      if(this.catalogue[nextChapterIndex].lessonInfo.length<=0) return;
      this.$refs.videoBar.initActiveChapterIndex(this.catalogue[nextChapterIndex].chapterId,this.catalogue[nextChapterIndex].lessonInfo[nextLessonIndex].lessonId);
    },

    // 获取当前激活章
    findActiveChapter(lessonId) {
      return this.catalogue.findIndex(chapter=> {
        return chapter.lessonInfo.findIndex(lesson=>lesson.lessonId===lessonId) >= 0
      });
    },
    //切换激活章节
    changeChapter(activeChapter){
      this.activeChapterId = activeChapter
    },
    //获取章节视频地址切换视频
    getVideoAddr(lessonId){
  
      if(!lessonId) return;
      
      //获取视频地址
      getVodPlayList({ lessonId : lessonId }).then(res=>{
        this.activeLessonId =lessonId 
        this.activechapterIndex =this.findActiveChapter(lessonId) 
        
        this.$refs.videoBar.changeVideo(res.playInfoList)
      }).catch(()=>{})
    },
    getChapters(courseId){
      //获取全部章节
      courseTotalChapters({courseId:courseId}).then(res=>{
          const {chapterInfos} =res;
          this.catalogue = chapterInfos;
          if(!this.$refs.videoBar) return;

          this.$nextTick(() => {
            if(this.$route.query.chapterId &&this.$route.query.lessonId){
                // 根据URL切换章节和视屏播放
                this.$refs.videoBar.initActiveChapterIndex(this.$route.query.chapterId,this.$route.query.lessonId)
            }else{
                // url无参数切换为第一章第一课
               this.$refs.videoBar.initActiveChapterIndex(this.catalogue[0].chapterId,this.catalogue[0].lessonInfo[0].lessonId)
            }
            
          })
          
      }).catch(()=>{})
    },
    changeTabs: function (tab) {
      if(tab.label === '课程答疑'){
        this.$refs.QA.getQAList()
      }
      
    },
    getCourseDetail(courseId) {
      courseDetail({ courseId: courseId }) // 调起api
        .then((res) => {
          const {
            teacherInfos,
            courseInfo,
            recommendCourses,
            readMe,
            hasCourse,
          } = res;
          this.teacher = teacherInfos;

          
          this.info = courseInfo;
          this.info.htmlText = readMe;
          this.hasCourse = hasCourse;
          this.classes = recommendCourses;
          this.getChapters(this.info.courseId)
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.btn_2{
  margin-right:20px;
  width:170px;
 
}
.flex-column {
  padding: 10px 20px;
  height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.itemTitle {
  position: relative;
  padding-left: 20px;
  margin: 50px 0 30px;
}
.itemTitle::before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 10px;
  background-color: red;
}
.introduce {
  padding: 50px 70px 0 0;
}
.teacher-icon {
  width: 120px;
  height: 120px;
  margin-right: 10px;
  border-radius:6px
}
.teacher-title {
  font-size: 14px;
  color: #f05c00;
}
.teacher-level {
  width: 25px;
  height: 25px;
  margin: 4px 0 6px;
  display: inline;
}
.teacher-item {
  margin-bottom: 20px;
}
.class_item{
  margin-bottom: 20px;
  cursor: pointer;
}
.class-img {
  width: 160px;
  height: 120px;
  margin-right: 10px;
  border-radius:6px
}
.class-text {
  margin: 10px 0 20px;
  -webkit-line-clamp: 2;
}
.class-price {
  font-size: 18px;
  color: #ff5f19;
}

.content {
  color: #666666;
  height: 208px;
  padding-left: 20px;
  span {
    color: var(--el-color-primary);
  }
  p:nth-child(1) {
    font-size: 24px;
    color: #333333;
  }
}
.img{
  height:208px;
  width: 100%;
  border-radius:6px
}
.btn {
  color: #ffffff;

  background: var(--el-color-primary);
  width: 200px;
  height: 40px;
  border-radius: 20px;
  font-size: 18px;
  font-weight: 600;
}

.type{
  color: #AAAAAA;
  font-size:16px;
  margin:24px 0 30px;
  span{
    margin-right: 30px;
  }
}
.price{
    margin-bottom: 30px;
}
.price span:first-child {
  display: inline-block;
  font-size: 28px;
  color: #ff5f19;
  font-weight: 600;
}
.price span:nth-child(2) {
  color: #b1b1b1;
  font-size: 16px;
  margin-left: 10px;
  text-decoration: line-through;
}

</style>